<template>
  <div>
    <van-nav-bar :title="titles">
      <img
        src="../../assets/image/arrow_left.png"
        width="20"
        height="20"
        slot="left"
        @click="leftClick"
      />
    </van-nav-bar>
    <div class="ss">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
          v-model="loading"
          :finished="finished"
          @load="onLoad"
          :offset="1"
        >
          <!-- <van-cell
            v-for="(item, index) in list"
            :key="index"
            :title="item.title"
          /> -->
          <div
            class="handbook-text"
            v-for="(item, index) in list"
            :key="index"
            @click="getSrc(item.title, item.content)"
          >
            <p>{{ item.title }}</p>

            <img
              src="../../assets/image/arr_rigth.png"
              alt=""
              width="9px"
              height="15"
            />
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import { queryNewsInfoApi } from "network/ApiServe";
export default {
  name: "Problem",

  created() {
    this.token = localStorage.getItem("token");
    this.appName = localStorage.getItem("appName");
    this.brandId = localStorage.getItem("brandId");
  },
  data() {
    return {
      titles: "常见问题",
      // this.$route.params.title != null
      //   ? this.$route.params.title
      //   : "常见问题",
      page: 0,
      newsInfo: [],
      sum: 0,

      list: [],
      loading: false,
      finished: false,
      refreshing: false,
    };
  },
  mounted() {
    this.getNewInfo(0);
  },
  methods: {
    leftClick() {
      console.log("title", this.titles);
      this.$router.back(-1);
    },
    getNewInfo(page) {
      queryNewsInfoApi(this.brandId, this.titles, page)
        .then((res) => {
          if (res.resp_code === "000000") {
            // console.log("res", res);
            this.sum = res.result.totalElements;
            // console.log("sum", this.sum);
            // this.list = res.result.content;
            res.result.content.filter((item) => {
              this.list.push(item);
            });
            console.log("11", this.list);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //下拉刷新成功
    onRefresh() {
      // 清空列表数据
      this.finished = false;
      this.page = 0;

      // 重新加载数据
      this.getNewInfo(0);
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad();
    },
    // 上拉加载
    onLoad() {
      let timer = setInterval(() => {
        if (this.refreshing) {
          this.list = [];
          this.refreshing = false;
        }

        this.page++;
        this.getNewInfo(this.page);
        this.loading = false;
        if (this.list.length >= this.sum) {
          this.finished = true;
          clearInterval(timer);
        }
      }, 1000);
    },
    getSrc(titles, urls) {
      // console.log("titles", titles);
      // console.log("urls", urls);
      this.$router.push({
        name: "OpenWeb",
        params: {
          title: titles,
          url: urls,
        },
      });
    },
  },
};
</script>
<style scoped>
.handbook-img p {
  margin-top: 20px;
}
.handbook-text {
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  padding: 10px 20px;
  border-bottom: 1px solid #efefef;
  font-size: 16px;
}
.doge {
  width: 140px;
  height: 72px;
  margin-top: 8px;
  border-radius: 4px;
}
</style>